<template>
	<view class="content">
		<view class="bg_orange">
			<view class="lessTitle">余额（元）</view>
			<view class="price fontSemiBold overflow_one">{{data.money}}</view>
			<view class="btnRecharge" @tap="jumpRecharge">充值</view>
			<view class="clearBoth"></view>
		</view>
		<view class="timeBox">
			<view class="spliteIcon"></view>
			<view class="timeTitle">账单明细</view>
			<view class="timeName">
				<uni-icons class="icon" type="arrowdown"  color="#999999" size="12"/>
				<biaofun-datetime-picker
					class="timeNames"
					placeholder="请选择结束时间"
					defaultValue="2021-01"
					start="2020-01"
					end="2040-12"
					fields="month"
					style="float: right;float: right;"
					@change="changeDatetimePicker"
				></biaofun-datetime-picker>
			</view>
			<view class="clearBoth"></view>
		</view>
		<view class="rowsList" v-for="(item,index) in list" :key="index">
			<view class="title" v-show="item.name == '1'">商品订单</view>
			<view class="title" v-show="item.name == '2'">虚拟商品订单</view>
			<view class="title" v-show="item.name == '3'">购买会员</view>
			<view class="title" v-show="item.name == '4'">商品退款订单</view>
			<view class="title" v-show="item.name == '5'">充值</view>
			<view class="title" v-show="item.name == '6'">咖啡订单</view>
			<view class="title" v-show="item.name == '7'">商品退款分佣扣除</view>
			<view class="title" v-show="item.name == '8'">商品订单分佣</view>
			<view class="time">{{item.time}}</view>
			<view class="price fontSemiRegular" v-if="item.type == 2">-{{item.price}}</view>
			<view class="price orange fontSemiRegular" v-if="item.type == 1">+{{item.price}}</view>
			<view class="clearBoth"></view>
		</view>
		

		
	</view>
</template>
<style>
	.content{}
	.content .bg_orange{width: 100%;padding:5%;padding-bottom: 0;background: rgb(227,95,51);}
	.content .bg_orange .lessTitle{color:#FFFFFF}
	.content .bg_orange .price{width:75%;height:160upx;line-height: 160upx;color:#FFFFFF;font-size: 92upx;font-weight: bold;float: left;}
	.content .bg_orange .btnRecharge{height:60upx;margin-top:50upx;font-size: 30upx;padding:10upx 30upx;color:#FFFFFF;float: right;color:rgb(227,95,51);background: white;border-radius: 100upx;}
	.content .timeBox{width: 100%;padding:3% 5%;background: rgb(245,245,249);}
	.content .timeBox .spliteIcon{width: 6upx;height:40upx;border-radius: 100upx;margin-right: 20upx;background: rgb(227,95,51);float: left;}
	.content .timeBox .timeTitle{width: 50%;float: left;height:40upx;line-height: 40upx;font-weight: bold;}
	.content .timeBox .timeName{width: 40%;float: right;text-align: right;height:40upx;line-height: 40upx;font-size: 26upx;color:#999999;}
	.content .timeBox .timeName .icon{margin-left: 20upx;float:right;text-align: right;}
	.content .rowsList{width: 100%;padding:2% 5%;border-bottom: 2upx solid #DDDDDD;position: relative;}
	.content .rowsList .title{width:51%;float: left;color:#30313B;font-weight: bold;}
	.content .rowsList .time{width:50%;float: left;color:#666666;font-size: 20upx;margin-top: 10upx;}
	.content .rowsList .price{float: right;width:50%;text-align: right;color:#30313B;font-size: 36upx;position: absolute;top:20%;right:5%;}
	.content .rowsList .orange{float: right;width:50%;text-align: right;color:rgb(227,95,51);font-size: 36upx;}
</style>
<script>
	import Share from '@/common/wx_share.js'
	import biaofunDatetimePicker from '@/components/biaofun-datetime-picker/biaofun-datetime-picker.vue';
	export default {
		components: {
			biaofunDatetimePicker
		},
		data() {
			return {
				share:{
					title:"",
					path:'/pages/tabbar/index',
					imageUrl:'',
					desc:'',
					content:''
				},
				data:{
					money:""
				},
				list:[
					// {id:1,name:"商城支付1",time:"2010.20.10",price:123,type:1},
					// {id:1,name:"商城支付2",time:"2010.20.10",price:123,type:2},
					// {id:1,name:"商城支付3",time:"2010.20.10",price:123,type:1},
				],
				time:"",
				pages:1

			}
		},
		onLoad(){
			var myDate = new Date();
			var year = myDate.getFullYear();
			var month = myDate.getMonth() + 1;
			this.time = year + "-" + 1
			this.AjaxLoad()
			this.AjaxLoadList();
		},
		onReachBottom(){
			this.pages++
			this.AjaxLoadList()
		},
		methods: {
			AjaxLoad(){
				let param={
					token:this._$userToken("userInfo").token,
					// token:"61a37939e67454853f97d91b33bed0279fb36d0d",
				};
				this._$InitRequest.request("Wallet/index", param).then(res => {
					this.data.money = res.data.price
				},error=>{})
			},
			AjaxLoadList(){
				var list = []
				let param={
					token:this._$userToken("userInfo").token,
					// token:"61a37939e67454853f97d91b33bed0279fb36d0d",
					page:this.pages,
					month:this.time
				};
				this._$InitRequest.request("Wallet/log", param).then(res => {
					res.data.about_us_list.forEach( (item) =>{
						list.push({
							id:item.id,
							name:item.order_type,
							time:item.time,
							price:item.price,
							type:item.de_type,
						})
					})
					for (var i = 0; i < list.length; i++){this.list.push( list[i] )}
				},error=>{})
			},
			jumpRecharge(){
				uni.navigateTo({
					url:"/pages_mine/pages/balance_of_account/balance_of_account"
				})
			},
			changeDatetimePicker(e){
				this.time = e.f6
				this.list = []
				this.pages = 1
				this.AjaxLoadList()
			},
			
			
			
			
			
			
			
			
			
			
			
			
		}
	}
</script>
<style lang="scss" scoped>
/deep/ .uni-input-input {font-size:32upx}
/deep/ .uni-radio-input-checked{background-color:rgb(110,43,34) !important;border:2upx solid white !important}
.content .html{
  ::v-deep {
    img {
      width: 100%;
    }
  }
}
</style>